    <style include="shared-style cr-shared-style">
      :host {
        box-sizing: border-box;
        display: block;
        overflow: auto;
      }

      .history-cards {
        margin-block-start: var(--first-card-padding-top);
      }

      dialog [slot=body] {
        white-space: pre-wrap;
      }
    </style>
    <div id="no-results" class="centered-message"
        hidden$="[[hasResults_(historyData_.length)]]">
      [[noResultsMessage_(searchedTerm)]]
    </div>

    <iron-list class="history-cards"
        items="[[historyData_]]" as="item" id="infinite-list"
        role="grid" aria-rowcount$="[[historyData_.length]]"
        hidden$="[[!hasResults_(historyData_.length)]]" preserve-focus>
      <template>
        <history-item tabindex$="[[tabIndex]]"
            item="[[item]]"
            selected="[[item.selected]]"
            is-card-start="[[isCardStart_(item, index, historyData_.length)]]"
            is-card-end="[[isCardEnd_(item, index, historyData_.length)]]"
            has-time-gap="[[needsTimeGap_(item, index, historyData_.length)]]"
            search-term="[[searchedTerm]]"
            number-of-items="[[historyData_.length]]"
            index="[[index]]"
            focus-row-index="[[index]]"
            iron-list-tab-index="[[tabIndex]]"
            last-focused="{{lastFocused_}}"
            list-blurred="{{listBlurred_}}">
        </history-item>
      </template>
    </iron-list>

    <iron-scroll-threshold id="scroll-threshold" scroll-target="infinite-list"
        lower-threshold="500" on-lower-threshold="onScrollToBottom_">
    </iron-scroll-threshold>

    <cr-lazy-render id="dialog">
      <template>
        <cr-dialog consume-keydown-event>
          <div slot="title" id="title">$i18n{removeSelected}</div>
          <div slot="body" id="body">$i18n{deleteWarning}</div>
          <div slot="button-container">
            <cr-button class="cancel-button" on-click="onDialogCancelTap_">
              $i18n{cancel}
            </cr-button>
            <cr-button class="action-button" on-click="onDialogConfirmTap_"
                <if expr="is_macosx">aria-describedby="title body"</if>>
              $i18n{deleteConfirm}
            </cr-button>
          </div>
        </cr-dialog>
      </template>
    </cr-lazy-render>

    <cr-lazy-render id="sharedMenu">
      <template>
        <cr-action-menu role-description="$i18n{actionMenuDescription}">
          <button id="menuMoreButton" class="dropdown-item"
              hidden="[[!canSearchMoreFromSite_(
                  searchedTerm, actionMenuModel_.item.domain)]]"
              on-click="onMoreFromSiteTap_">
            $i18n{moreFromSite}
          </button>
          <button id="menuRemoveButton" class="dropdown-item"
              hidden="[[!canDeleteHistory_]]" disabled="[[pendingDelete]]"
              on-click="onRemoveFromHistoryTap_">
            $i18n{removeFromHistory}
          </button>
          <button id="menuRemoveBookmarkButton" class="dropdown-item"
              hidden="[[!actionMenuModel_.item.starred]]"
              on-click="onRemoveBookmarkTap_">
            $i18n{removeBookmark}
          </button>
        </cr-action-menu>
      </template>
    </cr-lazy-render>
